Supabase AuthでSlack認証を試してみた

#Supabase

#Next.js

北川慶太

2022.05.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。

Supabaseは、firebaseの代替サービスと言われるBaasです。

今回は、SupabaseのOAuthプロバイダーの一つである、Slack認証をNext.jsプロジェクトで試してみました。

slack認証を有効にする

Supabaseにログイン

Supabaseでプロジェクトを作成します。

左サイドバーのSettingからAPIを選択し、「Configuration」のURLをコピーします。

slackでアプリを作成

api.slack.comにアクセスし、「Create an app」から新しくアプリを作成します。

「From scratch」を選択します。

アプリ名、ワークスペースを入力します。

今回はワークスペースを新規で作成しました。

「App Credentials」の項目から「Client ID」、「Client Secret」をコピーしておきます。

左サイドバーの「OAuth & Permissions」を選択し、「Redirect URLs」内の「Add New Redirect URL」を選択します。

SupabaseでコピーしたURLを追加して、保存します。

Supabaseに移動し、左サイドバーからAuthentication内のSettingsを選択します。下にスクロールし、「Slack enable」をオンにして「Client ID」と「Secret ID」をそれぞれ貼り付けます。

貼り付けたら、「External OAuth Providers」の横にある「save」を、忘れずにクリックします。

Next.js側の実装

プロジェクトを作成します。

$ yarn create next-app --ts

$ cd <appName>

Supabaseをインストールします。今回は、Supabase UIを使用します。

$ yarn add  @supabase/supabase-js @supabase/ui

.env.localファイルを作成し、キーとURLを環境変数に保存します。キーとURLはsupabaseの「Settings」→「API」から確認することができます。

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

/libsフォルダを作成し、配下にsupabaseClient.tsファイルを作成します。

supabaseClient.tsを以下のように記述し、Clientを初期化します。

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("");
}
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

では認証画面を実装します。今回はsupabase UIを使用します。

index.tsxを変更します。

import Head from "next/head";
import { useEffect, useState } from "react";
import { supabase } from "../libs/supabaseClient";
import styles from "../styles/Home.module.css";
import { Auth, Button } from "@supabase/ui";
import { User } from "@supabase/supabase-js";
import { NextPage } from "next";


const Home: NextPage = () => {
  const [user, setUser] = useState<User | null>();

  useEffect(() => {
    const user = supabase.auth.user();
    setUser(user);
  }, [user]);

  const signOut = async () => {
    supabase.auth.signOut();
    setUser(null);
  };

  if (user) {
    return (
      <div className={styles.container}>
        <Head>
          <title>Create Next App</title>
          <meta name="description" content="Generated by create next app" />
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <main className={styles.main}>
          <h1 className={styles.title}>supabase Auth</h1>

          <p className={styles.description}>Your Id: {user.id}</p>

          <Button onClick={() => signOut()} size={"large"}>SignOut</Button>
        </main>
      </div>
    );
  }
  return (
    <main className={styles.main} style={{ width: "500px", margin: "0 auto" }}>
      <Auth.UserContextProvider supabaseClient={supabase}>
        <Auth
          supabaseClient={supabase}
          providers={["slack"]}
          socialColors={true}
        />
      </Auth.UserContextProvider>
    </main>
  );
};

export default Home;

開発環境を立ち上げ、ログインしてみます。